<template>
  <el-form ref="formRef" :label-width="124" labe0-position="left" :model="basicData.form" class="user" :show-message="false">
    <div class="user_info">
      <p class="title">账号信息</p>
      <div class="info_box">
        <div class="_left">
          <el-form-item prop="supplierName" label="企业名称：" required>
            <el-input class="third_input" v-model="basicData.form.supplierName" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <el-form-item label="组织机构代码：">
            <el-input class="third_input" placeholder="请填写三证合一的统一社会信用代码" v-model="basicData.form.organizingInstitutionCode" :disabled="isSwitch" clearable></el-input>
          </el-form-item>
          <el-form-item label="营业执照：" prop="businessLicense.qualificationImg" required>
            <div v-if="!isSwitch" class="business-content">
              <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onLicenseUploadSuccess(file, 'businessLicense')" :before-upload="beforeUpload">
                <img :src="basicData.form.businessLicense.qualificationImg" />
              </el-upload>
            </div>

            <el-image v-else style="width: 72px; height: 72px" class="img" :src="basicData.form.businessLicense.qualificationImg" :preview-src-list="[basicData.form.businessLicense.qualificationImg]"> </el-image>
          </el-form-item>
          <el-form-item class="personCardDate" label="证件有效期：" prop="businessLicense.effectiveDate" required>
            <el-date-picker v-model="basicData.form.businessLicense.effectiveDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.businessLicense.expiredDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" />
          </el-form-item>

          <el-form-item label="医疗器械互联网销售备案证：" prop="internetCertificate" required>
            <div v-if="!isSwitch" class="business-content">
              <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onLicenseUploadSuccess(file, 'internetCertificate')" :before-upload="beforeUpload">
                <img :src="basicData.form.internetCertificate.qualificationImg" />
              </el-upload>
            </div>

            <el-image v-else style="width: 72px; height: 72px" class="img" :src="basicData.form.internetCertificate.qualificationImg" :preview-src-list="[basicData.form.internetCertificate.qualificationImg]"> </el-image>
          </el-form-item>

          <el-form-item label="纳税识别号：" prop="taxpayerId" required>
            <el-input class="third_input" v-model="basicData.form.taxpayerId" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <el-form-item prop="registeredAddress" label="注册地址：" required>
            <el-input class="third_input" v-model="basicData.form.registeredAddress" :disabled="isSwitch" clearable></el-input>
          </el-form-item>
          <el-form-item prop="corporateAccount" label="对公账户：" required>
            <el-input v-model="basicData.form.corporateAccount" class="third_input" :disabled="isSwitch" clearable></el-input>
          </el-form-item>
        </div>

        <div class="_right">
          <el-form-item label="法人姓名：">
            <el-input class="third_input" v-model="basicData.form.legalPersonName" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <el-form-item prop="legalPersonIdNumber" label="身份证号：">
            <el-input class="third_input" v-model="basicData.form.legalPersonIdNumber" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <div class="personCard">
            <el-form-item prop="legalPersonCardPictureObverse" label="身份证正反面：">
              <el-upload ref="upload" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureObverse')" :before-upload="beforeUpload" :disabled="isSwitch">
                <img v-if="basicData.form.legalPersonCardPictureObverse" :src="basicData.form.legalPersonCardPictureObverse" />
                <div class="noImg" v-else>
                  <el-icon class="icon"><Plus /></el-icon>
                  <div class="tip" scope.slot="tip">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item prop="legalPersonCardPictureReverse">
              <el-upload ref="upload" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureReverse')" :before-upload="beforeUpload" :disabled="isSwitch">
                <img v-if="basicData.form.legalPersonCardPictureReverse" :src="basicData.form.legalPersonCardPictureReverse" />
                <div class="noImg" v-else>
                  <el-icon class="icon"><Plus /></el-icon>
                  <div class="tip" scope.slot="tip">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>
          </div>

          <el-form-item class="personCardDate" label="证件有效期：" prop="legalPersonCardStartDate">
            <el-date-picker class="date_input" v-model="basicData.form.legalPersonCardStartDate" :disabled="isSwitch" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.legalPersonCardEndDate" class="date_input" type="date" placeholder="请选择到期时间" :disabled="isSwitch" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
          </el-form-item>

          <el-form-item prop="depositBank" label="开户银行：" required>
            <el-input class="third_input" v-model="basicData.form.depositBank" :disabled="isSwitch" clearable></el-input>
          </el-form-item>
          <el-form-item prop="account" v-if="isSwitch === true" label="登录账号：" required>
            <div class="captcha">
              <el-input v-model="basicData.form.account" autocomplete="off" :disabled="isSwitch"></el-input>
              <Button class="captcha-btn" label="更换手机号" @click="onChangeNumberClick" />
              <Button class="captcha-btn" label="修改密码" @click="onChangePasswordClick" />
            </div>
          </el-form-item>
        </div>
      </div>
    </div>

    <div class="store_info">
      <p class="title">店铺信息</p>
      <div class="info_box">
        <div class="_left">
          <el-form-item prop="storeManager" label="店铺负责人：" required>
            <el-input class="third_input" v-model="basicData.form.storeManager" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <el-form-item prop="contactPhone" label="联系电话：" :rules="{ required: true, validator: validatePhone, trigger: 'blur' }">
            <el-input class="third_input" v-model="basicData.form.contactPhone" :disabled="isSwitch" clearable></el-input>
          </el-form-item>

          <el-form-item prop="managerIdNumber" label="身份证号：" required>
            <el-input class="third_input" v-model="basicData.form.managerIdNumber" :disabled="isSwitch" clearable></el-input>
          </el-form-item>
        </div>

        <div class="_right">
          <div class="personCard">
            <el-form-item prop="managerCardPageObverse" label="身份证正反面：" required>
              <el-upload ref="upload" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'managerCardPageObverse')" :before-upload="beforeUpload" :disabled="isSwitch">
                <img v-if="basicData.form.managerCardPageObverse" :src="basicData.form.managerCardPageObverse" />
                <div class="noImg" v-else>
                  <el-icon class="icon"><Plus /></el-icon>
                  <div class="tip" scope.slot="tip">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item prop="managerCardPageReverse" required>
              <el-upload ref="upload" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'managerCardPageReverse')" :before-upload="beforeUpload" :disabled="isSwitch">
                <img v-if="basicData.form.managerCardPageReverse" :src="basicData.form.managerCardPageReverse" />
                <div class="noImg" v-else>
                  <el-icon class="icon"><Plus /></el-icon>
                  <div class="tip" scope.slot="tip">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>
          </div>

          <el-form-item class="personCardDate" label="证件有效期：" prop="managerCardStartDate" required>
            <el-date-picker class="date_input" v-model="basicData.form.managerCardStartDate" :disabled="isSwitch" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.managerCardEndDate" class="date_input" type="date" placeholder="请选择到期时间" :disabled="isSwitch" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
          </el-form-item>
        </div>
      </div>
    </div>
  </el-form>

  <Number v-model:visible="numberVisible" @complete="onComplete" />

  <Password v-model:visible="passwordVisible" />
</template>

<script setup>
import { reactive, toRefs, shallowRef, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus, Minus } from '@element-plus/icons-vue'
import { apiBasePath } from '@/api/config'
import api from '@/api'
import consts from '@/consts'
import { ElMessage } from 'element-plus'
import Button from '@/components/button/button.vue'
import Number from './number.vue'
import Password from './password.vue'

const route = useRoute()
const props = defineProps(['infoForm', 'isSwitch'])
const emit = defineEmits(['complete'])

const { infoForm } = toRefs(props)

const formRef = shallowRef()

const basicData = reactive({
  form: infoForm
})

const numberVisible = ref(false)
const passwordVisible = ref(false)

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3456789]\d{9}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const actionUrl = apiBasePath + '/medinstrument/third/uploadSingleFile'

const headers = {
  Authorization: 'Bearer ' + localStorage.getItem('_third_token')
}

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }
  return isJPG && isLt1M
}

const onLicenseUploadSuccess = (file, fld) => {
  if (fld === 'businessLicense') {
    basicData.form.businessLicense.qualificationImg = file.data
  }

  if (fld === 'internetCertificate') {
    basicData.form.internetCertificate.qualificationImg = file.data
  }
}

const onUploadSuccess = (file, fld) => {
  basicData.form[fld] = file.data
}

const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve()
      } else {
        reject()
      }
    })
  })
}

defineExpose({ submit })

const onChangeNumberClick = () => {
  numberVisible.value = true
}

const onChangePasswordClick = () => {
  passwordVisible.value = true
}

const onComplete = () => {
  emit('complete')
}
</script>

<style lang="scss" scoped>
.user {
  .user_info,
  .store_info {
    padding: 20px 0;

    .title {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      font-weight: 500;
    }

    .info_box {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
  }

  .store_info {
    border-top: 1px solid var(--border-color);
  }

  ._left,
  ._right {
    width: 520px;
  }

  .captcha {
    width: 100%;
    display: flex;
    align-items: center;
    .el-input {
      height: 40px;
    }

    .captcha-btn {
      width: 140px;
      height: 40px;
      color: var(--color-primary);
      border-color: var(--color-primary);
      font-size: 14px;
      background-color: #fff;
      cursor: pointer;
      margin-left: 12px;
    }
  }

  .business-content {
    display: flex;

    .desc {
      // width: 307px;
      // height: 32px;
      font-size: 12px;
      color: var(--span-color-text);
      line-height: 16px;
      margin-left: 12px;
      margin-top: 44px;
    }
  }

  .personCard {
    display: flex;

    :deep(.el-form-item__content) {
      margin-left: 0 !important;
      margin-right: 20px;
    }
  }

  .personCardDate {
    :deep(.el-form-item__content) {
      flex-wrap: nowrap;
    }

    .time-icon {
      font-size: 8px;
      margin: 0 11px;
      color: var(--span-color-text);
    }
  }
}
</style>
